Transcrição
Criaremos o componente photos, a ser utilizado por photo-list, que diz respeito à página. Por ser um componente muito atrelado a photo-list, o criaremos dentro desta pasta. Assim, se quisermos saber quais componentes dividimos para ajudar na organização de exibição do maior componente, que é photo-list, encontraremos nesta pasta.
Pausaremos o Angular CLI no terminal e digitaremos ng generate component photos/photo-list/photos. Se checarmos photos.module.ts, o PhotosComponent foi automaticamente adicionado em declarations. Para evitarmos que tudo fique em um mesmo componente, dividimos elementos em photo-list e photos, sendo este especializado em exibir as imagens de acordo com o grid do Bootstrap.
Em seguida, abriremos photo-list.component.html, recortaremos seu conteúdo e o colaremos em photos.component.html, para que o componente photos.component.ts receba uma lista de imagens do tipo Photo, um array inicialmente vazio. Clicaremos no ícone de lâmpada para que o tipo seja importado. Sabemos que para passarmos um dado para este componente, ele precisa ser um inbound property, portanto também importaremos @Input.
export class PhotosComponent implements OnInit {
@Input() photos: Photo[] = [];
constructor() { }
ngOnInit() {
}
}No momento de criação do componente, app-photos está prefixado com "app". Precisamos tomar cuidado, pois a nossa aplicação é denominada "alurapic". Assim, usaremos "ap-photos" no selector de @Component em photos.component.ts, "ap-photo-form" em photo-forms.component.ts e "ap-not-found" em not-found.component.ts.
Recapitulando, em photos.component.ts passamos uma lista de imagens em Photo, e seu selector é ap-photos. Precisaremos utilizar este componente em photo-list.component.html, então incluiremos as tags <ap-photos> e o Data binding de photos:
<ap-photos [photos]="photos"></ap-photos>Em photo-list.component, onde está photos: any[] = [], trocaremos por photos: Photo[] = []. E no arquivo photo-list.component.html usaremos o componente ap-photos, e associaremos a inbound property photos à propriedade photos, que guarda as imagens provenientes do back end.
Vamos testar tudo no navegador? Antes disso, voltaremos o Angular CLI pelo terminal.
Em suma, retiramos a responsabilidade de apresentação do componente de photo-list para photos. E toda vez que acessarmos o navegador cairemos na página de erro, pois precisamos agora especificar o usuário. Se testarmos com localhost:4200/user/flavio, as imagens serão exibidas como anteriormente, porém ainda com o problema de termos um único row (linha) com várias columns (colunas).
É necessário ajustarmos estes dados no componente photos, no ato de recebê-los, para que o grid do Bootstrap funcione corretamente.